<script lang="jsx">
import { onMounted, ref, defineComponent, computed } from "vue";
import { useRouter, useRoute } from "vue-router";

export default defineComponent({
  setup() {
    const router = useRouter();
    const route = useRoute();

    const menus = ref([]);
    const routes = router.getRoutes();
    onMounted(() => {
      menus.value = routes.find((item) => item.name === "layout").children;
    });
    const getPath = (name) => {
      let route = routes.find((route) => route.name === name);
      return route.path;
    };
    const cutPath = computed(() => route.path);
    const menuItem = ({data}) => {
      return data.map((item) => {
        if (item.children?.length > 0) {
          return (
            <el-sub-menu
              index={item.name}
              v-slots={{ title: () => <span>{item.title}</span> }}
            >
              <menuItem data={item.children}/>
            </el-sub-menu>
          );
        } else {
          return (
            <el-menu-item index={getPath(item.name)}>
              <span>{item.meta?.title}</span>
            </el-menu-item>
          );
        }
      });
    };
    return () => (
      <el-menu
        router
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        default-active={cutPath.value}
        unique-opened
      >
        <menuItem data={menus.value}/>
      </el-menu>
    );
  },
});
</script>

<style lang="less" scoped></style>
